<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-20 13:57:03
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-17 09:08:41
-->

<div class="warehousing">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>库存盘点管理</span>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="p-formgroup-inline">
                    <p-button *ngIf="'Pages.InventoryManagement.AddSheet' | permission" label="新增盘点单" (onClick)="add()"></p-button>
                </div>
                <div class="p-formgroup-inline" style="margin-top: 10px;">
                    <span class="p-field">
                        <span class="input-lable">仓库名称：</span>
                        <p-dropdown filter="true" name="stroeName" [options]="stroeNameOptions" placeholder="请选择仓库名称"
                            [(ngModel)]="stroeName" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="stroeName !=  undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="stroeName ==  undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable">物料类别：</span>
                        <p-dropdown filter="true" name="materialsNode" [options]="materialsNodeOptions"
                            placeholder="请选择物料类别" [(ngModel)]="materialsNode" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="materialsNode !=  undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="materialsNode ==  undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable" style="margin-right: 27px;">盘点日期：</span>
                        <p-calendar dateFormat="yy-mm-dd" name="rangeDates" [(ngModel)]="rangeDates" selectionMode="range"
                             [showIcon]="true" [locale]="chinese"></p-calendar>
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable">盘点状态：</span>
                        <p-dropdown filter="true" name="status" [options]="statusOptions" placeholder="请选择盘点状态"
                            [(ngModel)]="status" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="status !=  undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="status ==  undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <span class="p-field ml">
                        <span class="input-lable">盘点人：</span>
                        <p-dropdown filter="true" name="person" [options]="personOptions" placeholder="请选择盘点人"
                            [(ngModel)]="person" emptyFilterMessage="暂无数据">
                            <ng-template let-item pTemplate="selectedItem">
                                <span *ngIf="person !=  undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                <span *ngIf="person ==  undefind "
                                    style="vertical-align:middle; margin-left: .5em;width: 147px;"> </span>
                            </ng-template>
                            <ng-template let-model pTemplate="item">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                    </div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                    </span>
                    <p-button label="查询" (onClick)="getTableList()" class="ml"></p-button>
                    <p-button label="重置" (onClick)="reset()" class="ml"></p-button>
                </div>
                <div class="row align-items-center" style="margin-top: 25px;">
                    <div class="primeng-datatable-container">
                        <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                            rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                            [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 150px">操作</th>
                                    <th style="width: 50px">序号</th>
                                    <th style="width: 150px">盘点单号</th>
                                    <th style="width: 150px">仓库名称</th>
                                    <th style="width: 150px">物料类别</th>
                                    <th style="width: 150px">实际开始日期</th>
                                    <th style="width: 150px">实际结束日期</th>
                                    <th style="width: 150px">盘点状态</th>
                                    <th style="width: 150px">盘点人</th>
                                    <th style="width: 150px">计划盘点开始时间</th>
                                    <th style="width: 150px">计划盘点结束时间</th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                <tr>
                                    <td style="width: 150px">
                                        <div class="btn-group dropdown" dropdown container="body">
                                            <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                                                <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                            </button>
                                            <ul class="dropdown-menu" *dropdownMenu>
                                                <li>
                                                    <a *ngIf="'Pages.InventoryManagement.Histroy' | permission" href="javascript:;" (click)="lookResume(record)">履历</a>
                                                </li>
                                                <li *ngIf="record.inventoryStateDesc != '已盘点'">
                                                    <a *ngIf="'Pages.InventoryManagement.Inventory' | permission" href="javascript:;" (click)="update(record)">盘点</a>
                                                </li>
                                                <li>
                                                    <a *ngIf="'Pages.InventoryManagement.Check' | permission" href="javascript:;" (click)="watch(record)">查看</a>
                                                </li>
                                                <li *ngIf="record.inventoryStateDesc != '已盘点'">
                                                    <a *ngIf="'Pages.InventoryManagement.Complete' | permission" href="javascript:;" (click)="end(record)">结束</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td style="width: 50px">{{rowIndex+1}}</td>
                                    <td style="width: 150px">{{record.inventoryNo}}</td>
                                    <td style="width: 150px">{{record.stroeName}}</td>
                                    <td style="width: 150px">{{record.materialsNodeDesc}}</td>
                                    <td style="width: 150px">{{record.inventoryRstartTime | momentFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
                                    <td style="width: 150px">{{record.inventoryREndTime | momentFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
                                    <td style="width: 150px">{{record.inventoryStateDesc}}</td>
                                    <td style="width: 150px">{{record.inventoryPeopleDesc}}</td>
                                    <td style="width: 150px">{{record.inventoryStartTime | momentFormat:'YYYY-MM-DD'}}</td>
                                    <td style="width: 150px">{{record.inventoryEndTime | momentFormat:'YYYY-MM-DD'}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                (onPageChange)="getTableList($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 履历 -->
    <app-inventory-record #InventoryRecordComponent [parentInfo]="rowdata"></app-inventory-record>
    <!-- 盘点 -->
    <app-inventory #InventoryComponent [editData]="rowdata" [title]="title" (modalSave)="getTableList()"></app-inventory>
    <!-- 新增盘点单 -->
    <p-dialog header="新增盘点单" [(visible)]="addFlag" modal="modal" [responsive]="true" (onHide)="onHide($event)">
        <form *ngIf="actived" #confirmForm="ngForm" novalidate autocomplete="off">
            <div class="modal-boday" style="height: 420px!important;width: 1000px!important;">
                <div class="form-group">
                    <label style="margin-right: 10px; margin-top: 5px;" for="label">盘点单号*：</label>
                    <input #noInput="ngModel" style=" width:150px;height: 35px;margin-right: 10px;" name="noF" pInputText
                            type="text" [(ngModel)]="form.no" required/>
                            <validation-messages [formCtrl]="noInput"></validation-messages>
                </div>
                <div class="form-group" style="display: flex;">
                    <label style="margin-right: 10px; margin-top: 5px;" for="label">仓库名称*：</label>
                    <p-dropdown required filter="true" name="stroeNameF" [options]="stroeNameOptions" placeholder="请选择仓库名称"
                        [(ngModel)]="form.stroeName" #stroeNameSelect="ngModel" emptyFilterMessage="暂无数据">
                        <ng-template let-item pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                        </ng-template>
                        <ng-template let-model pTemplate="item">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">{{model.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    <validation-messages [formCtrl]="stroeNameSelect"></validation-messages>
                    <label style="margin-right: 20px; margin-top: 5px;margin-left: 20px;" for="label">物料类别*：</label>
                    <p-dropdown required #materialsNodeSelect="ngModel" filter="true" name="materialsNodeF" [options]="materialsNodeOptions" placeholder="请选择物料类别"
                        [(ngModel)]="form.materialsNode" emptyFilterMessage="暂无数据">
                        <ng-template let-item pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                        </ng-template>
                        <ng-template let-model pTemplate="item">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                    {{model.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    <validation-messages [formCtrl]="materialsNodeSelect"></validation-messages>
                    <label style="margin-right: 20px; margin-top: 5px;margin-left: 20px;" for="label">盘点日期*：</label>
                    <p-calendar required #rangeDatesSelect="ngModel" name="rangeDatesF" [(ngModel)]="form.rangeDates" selectionMode="range"
                    [readonlyInput]="true" [showIcon]="true"></p-calendar>
                    <validation-messages [formCtrl]="rangeDatesSelect"></validation-messages>
                </div>
            </div>
            <div class="modal-footer" style="justify-content: center;">
                <p-button label="保存" [disabled]="!confirmForm.form.valid" (onClick)="addSave()"></p-button>
            </div>
        </form>
    </p-dialog>
</div>